import React,{ useEffect, useState } from 'react';

import CustHd01 from '../utils/CustHd01';
import CustInt from '../../../utils/CustInt';
import IntCode from '../../../utils/IntCode';
import { 
    isValidCode, isMobile, validIdCard, isEmpty, 
} from '../../../utils/CommonUtils';

import { 
    Mobile, ValidCode, IdCard, NameIC
} from '../../../../common/js/Options';
import { Toast } from 'antd-mobile';


/**
 * 历史收货人方式身份验证
 * @param {*} props 
 * @returns 
 */
function IdentityTone (props){
    // eslint-disable-next-line
    const { setModPwdtab, findPwdData } = props;
    
    const [ vcode, setVcode ] = useState('');
    const [ mobile, setMobile ] = useState('');
    const [ idCard, setIdCard ] = useState('');
    const [ username, setUsername ] = useState('');
    // 登录按钮禁用状态
    const [ disableBtn, setDisableBtn ] = useState(true);
    /** 当前操作输入框 */
    const [ currentName, setCurrentName ] = useState('');
    const [ txtCodeTime, setTxtCodeTime ] = useState('获取验证码');


    useEffect(() => {}, [ vcode, mobile, idCard ]);

    const onIntFocus = (e) => {
        setCurrentName(e.target.name);
        if(vcode && mobile && idCard){
            if(isMobile(mobile) && validIdCard(idCard)) {
                setDisableBtn(false);
            } else {
                setDisableBtn(true);
            }
        } else {
            setDisableBtn(true);
        }
    }

    const doGetCode = () => {
        if(isEmpty(mobile)) {
            Toast.show({content: '请输入手机号码'});
            return false;
        }
        if(!isMobile(mobile)) {
            Toast.show({content: '请输入正确的手机号码'});
            return false;
        }
        // 发起 ajax 请求

        return true;
    }

    const doOption = (e, setFunc) => setFunc(e.target.value);

    const doSubmit = () => {
        setModPwdtab(true)
    } 


    return (
        <div className='w-newlay' style={{ margin: '0 .35rem' }}>
            <CustHd01 src={require('../../../../common/images/logo5.gif')} />

            <CustInt name={'username'} intValue={username} icon={<NameIC/>} maxLen={11}
                currentName={currentName}
                doValid={v => !isEmpty(v)} desc='请输入用户姓名' setValue={v=> setUsername(v) }
                doFocus={(e)=> onIntFocus(e)} doChange={(e)=> doOption(e, setUsername)} placeholder='请输入用户姓名'/>

            <CustInt name={'idCard'} intValue={idCard} 
                icon={<IdCard/>} currentName={currentName} desc='请输入合法的身份证信息' 
                doValid={(v) => validIdCard(v) } setValue={v=> setIdCard(v) }
                doFocus={(e)=> onIntFocus(e)} doChange={(e)=> doOption(e, setIdCard)} placeholder='请输入身份证号码'/>

            <CustInt name={'mobile'} intValue={mobile} icon={<Mobile/>} maxLen={11}
                currentName={currentName}
                doValid={v => isMobile(v)} desc='请输入正确的手机号码' setValue={v=> setMobile(v) }
                doFocus={(e)=> onIntFocus(e)} doChange={(e)=> doOption(e, setMobile)} placeholder='请输入手机号码'/>

            <IntCode name={'vcode'} intValue={vcode} icon={<ValidCode/>} setValue={v=> setVcode(v) }
                currentName={currentName}
                getCode={()=> doGetCode()}
                doValid={v => isValidCode(v)} desc='请输入验证码'
                doFocus={(e)=> onIntFocus(e)} doChange={(e)=> doOption(e, setVcode)} maxLen={6}
                txtCodeTime={txtCodeTime} setTextCode={setTxtCodeTime} placeholder='请输入验证码'/>

            <div className='w-next'>
                <button style={{ fontSize: '.16rem' }} children='下一步' onClick={()=> doSubmit() }
                    className={`w-btn w-mk-btn w-wd_10 w-ris-dot2${disableBtn ? ' w-disable' : ''}`} />
            </div>
        </div>
    )
}

export default IdentityTone;